<template>
  <nav1 v-if="navType == 1" v-bind="{ ...$attrs }" />
  <nav2 v-else-if="navType == 2" v-bind="{ ...$attrs }" />
  <nav3 v-else-if="navType == 3" v-bind="{ ...$attrs }" />
  <nav4 v-else-if="navType == 4" v-bind="{ ...$attrs }" />
  <nav5 v-else-if="navType == 5" v-bind="{ ...$attrs }" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import nav1 from "./nav1.vue";
import nav2 from "./nav2.vue";
import nav3 from "./nav3.vue";
import nav4 from "./nav4.vue";
import nav5 from "./nav5.vue";

const router = useRouter();
const route = useRoute();

// Props
const props = defineProps({
  navType: {
    type: [Number, String],
    default: 4,
  },
});

// Data
const activeIndex = ref<string>("home");

// Methods
const changeNav = (item: any) => {
  activeIndex.value = item.value;
  router.push(item.link);
  emit("navChange", item);
};

// Emits
const emit = defineEmits(["navChange"]);

// Lifecycle
console.log("数据呀", route);
</script>

<style scoped lang="less"></style>
